<template>
    <!-- 弹层 -->
    <div class="layer">
        <h4 v-if="currCategoryList">
            {{ currCategoryList.id === 'brand' ? '品牌' : '分类' }}推荐
            <small>根据您的购买或浏览记录推荐</small>
        </h4>
        <ul v-if="currCategoryList && currCategoryList.goods && currCategoryList.goods.length">
            <li v-for="item in currCategoryList.goods" :key="item.id">
                <RouterLink to="/">
                    <img :src="item.picture" alt />
                    <div class="info">
                        <p class="name ellipsis-2">{{ item.name }}</p>
                        <p class="desc ellipsis">{{ item.desc }}</p>
                        <p class="price">
                            <i>¥</i>
                            {{ item.price }}
                        </p>
                    </div>
                </RouterLink>
            </li>
        </ul>
        <ul v-if="currCategoryList && currCategoryList.brands && currCategoryList.brands.length">
            <li class="brand" v-for="item in currCategoryList.brands" :key="item.id">
                <RouterLink to="/">
                    <img :src="item.picture" alt />
                    <div class="info">
                        <p class="place">
                            <i class="iconfont icon-dingwei"></i>
                            {{ item.place }}
                        </p>
                        <p class="name ellipsis">{{ item.name }}</p>
                        <p class="desc ellipsis-2">{{ item.desc }}</p>
                    </div>
                </RouterLink>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name: '',
    props: ['currCategoryList']
};

</script>

<style lang="less" scoped>
.layer {
    width: 990px;
    height: 500px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 250px;
    top: 0;
    display: none;
    padding: 0 15px;
    h4 {
        font-size: 20px;
        font-weight: normal;
        line-height: 80px;
        small {
            font-size: 16px;
            color: #666;
        }
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            width: 310px;
            height: 120px;
            margin-right: 15px;
            margin-bottom: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
            background: #fff;
            &:nth-child(3n) {
                margin-right: 0;
            }
            a {
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                padding: 10px;
                &:hover {
                    background: #e3f9f4;
                }
                img {
                    width: 95px;
                    height: 95px;
                }
                .info {
                    padding-left: 10px;
                    line-height: 24px;
                    width: 190px;
                    .name {
                        font-size: 16px;
                        color: #666;
                    }
                    .desc {
                        color: #999;
                    }
                    .price {
                        font-size: 22px;
                        color: @priceColor;
                        i {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
    .brand {
        height: 180px;
        a {
            align-items: flex-start;
            img {
                width: 120px;
                height: 160px;
            }
            .info {
                p {
                    margin-top: 8px;
                }
                .place {
                    color: #999;
                }
            }
        }
    }
}
</style>